<template>
  <div class="app-container">
    <!--查询-->
    <el-form :inline="true" :model="signQuery" class="demo-form-inline">
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="signQuery.begin"
          type="datetime"
          value-format="timestamp"
          placeholder="时间点">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="signQuery.end"
          type="datetime"
          value-format="timestamp"
          placeholder="时间点">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="signQuery.status" style="margin-left: 10px;width: 80%" clearable placeholder="可搜索">
          <el-option
            v-for="status in signStatusEnum"
            :key="status.value"
            :label="status.label"
            :value="status.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="sign">签到</el-button>

    <el-table :data="signList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" prop="name" label="名字">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="signDate" label="早签时间">
        <template slot-scope="scope">
          <el-date-picker readonly v-model="scope.row.begin" type="datetime" placeholder="早签时间"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="beginStatus" label="早签状态">
        <template slot-scope="scope">
          <el-select v-model="scope.row.beginStatus" disabled style="margin-left: 10px;width: 80%" placeholder="早签状态">
            <el-option
              v-for="status in signStatusEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="signDate" label="晚签时间">
        <template slot-scope="scope">
          <el-date-picker readonly v-model="scope.row.end" type="datetime" placeholder="晚签时间"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="endStatus" label="晚签状态">
        <template slot-scope="scope">
          <el-select v-model="scope.row.endStatus" disabled style="margin-left: 10px;width: 80%" placeholder="晚签状态">
            <el-option
              v-for="status in signStatusEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="duration" label="时长">
        <template slot-scope="scope">
          {{ scope.row.duration }} (小时)
        </template>
      </el-table-column>
      <el-table-column align="center" prop="lack" label="缺失时长">
        <template slot-scope="scope">
          {{ scope.row.lack }} (分钟)
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="applyComplementSign(scope)" :disabled="scope.row.lack==0">补签</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getSignList"
      />
    </div>

    <el-dialog :visible.sync="dialogVisible" title="补签申请">
      <el-form :model="complementSign" label-width="80px" :rules="rules" label-position="left">
        <el-form-item label="开始时间" prop="begin">
          <el-date-picker
            v-model="complementSign.begin"
            type="datetime"
            value-format="yyyy-MM-ddTHH:mm:ss.000Z"
            placeholder="时间点">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="end">
          <el-date-picker
            v-model="complementSign.end"
            type="datetime"
            value-format="yyyy-MM-ddTHH:mm:ss.000Z"
            placeholder="时间点">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="补签类型" prop="type">
          <el-select v-model="complementSign.type" style="width: 80%" placeholder="请选择">
            <el-option
              v-for="status in complementSignTypeEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件" >
          <el-upload
            class="upload-demo"
            ref="upload"
            action=""
            accept="image/jpeg,image/jpg,image/png"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :http-request="upload">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addComplementSign, getSignRecord, sign } from '@/api/sign'
import { upload } from '@/api/file'

const defaultSign = {
  id: ''
}
const defaultComplementSign = {
  id: ''
}

export default {
  name: 'Sign',
  components: {},
  data() {
    return {
      complementSign: Object.assign({}, defaultComplementSign),
      signList: [],
      signQuery: {},
      complementSignTypeEnum: [
        {value: 'LATE', label: "迟到补签"},
        {value: 'ALL', label: "全天补签"},
        {value: 'OTHER', label: "其他"},
      ],
      signStatusEnum: [
        {value: 'LATE', label: "迟到"},
        {value: 'NORMAL', label: "正常"},
        {value: 'ABNORMAL', label: "异常"},
        {value: 'HOLIDAY', label: "休假"}
      ],
      checkStrictly: false,
      total: 100,
      page: 1,
      limit: 20,
      dialogType: 'new',
      dialogVisible: false,
      fileList: [],
      rules: {
        begin: [
          { required: true, message: '请输入时间', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请输入类型', trigger: 'change' },
        ]
      }
    };
  },
  //方法集合
  methods: {
    async sign() {
      await sign()
      await this.getSignList()
    },
    async getSignList(page = 1) {
      const offset = this.limit * (page - 1)
      const res = await getSignRecord(this.signQuery, offset, this.limit)
      this.signList = res.data.rows
      this.total = res.data.total
    },
    onSubmit() {
      this.getSignList()
    },
    // 补签
    applyComplementSign() {
      this.complementSign = Object.assign({}, defaultComplementSign)
      this.dialogVisible = true
    },
    async confirm() {
      if (this.complementSign.fileId === '' || this.complementSign.fileId === undefined) {
        this.$message({
          message: '信息需填写完整',
          type: 'warning'
        })
        return
      }
      await addComplementSign(this.complementSign)
      console.log(this.complementSign)
      this.dialogVisible = false
      await this.getSignList()
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: '操作成功',
        type: 'success'
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.complementSign.fileId = ''
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    async upload(params) {
      let form = new FormData();
      this.$refs.upload.uploadFiles.forEach((file) => {
        form.append("file", file.raw);
      });
      await upload(form).then((res) => {
        this.complementSign.fileId = res.data
        // console.log(this.complementSign.fileId)
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getSignList()
    this.$notify.info({
      title: '提示',
      message: '若只补晚签，则只填写晚签时间，若补全天，则早晚签都需要填写',
      duration: 0
    });
  }
}

</script>

<style scoped>
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
